<template>
  <div class="Association-gateway">
    <!-- Form -->
    <el-button @click="openDialog()"  class="tableIcon" title="关联网关" type="text" size="small">
      <span style="font-size: 12px;height: 20px; padding: 1px; color: #0072F3; border-radius: 4px">关联网关</span>
    </el-button>
    <!--<el-button class="relation" type="text" @click="dialogFormVisible = true">关联设备</el-button>-->

    <el-dialog title="关联网关" :visible.sync="dialogTableVisible">
      <el-form :inline="true" :model="getAssetBody">
        <el-form-item label="物联网关名称:" label-width="101">
          <el-input class="inputSelect" v-model="getAssetBody.data.condition.asset_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="型号:" label-width="50">
          <el-select v-model="getAssetBody.data.condition.model" clearable placeholder="请选择">
            <el-option
              v-for="item in inOptions"
              :key="item.model"
              :label="item.model"
              :value="item.model">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="bottonQuery" type="primary" @click="getAsset()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="assetData" stripe fit highlight-current-row
                style="width: 100%;" height="541" :header-cell-style="{background:'#F7F8F9'}" @selection-change="assetChangeFun">
        <el-table-column
          type="selection"
          width="45"
          @selection-change="assetChangeFun">
        </el-table-column>
        <el-table-column
          prop="asset_no"
          label="物联网关编号"
          sortable
          width="160">
        </el-table-column>
        <el-table-column
          prop="asset_name"
          label="物联网关名称"
          width="160">
        </el-table-column>
        <el-table-column
          prop="brand"
          label="品牌"
          sortable
          width="130">
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="130">
        </el-table-column>
        <el-table-column
          prop="sn"
          label="序列号"
          width="140">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="164">
        </el-table-column>
        <el-table-column
          prop="asset_status"
          label="状态"
          width="80">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="clears" @click="dialogTableVisible = false">取 消</el-button>
        <el-button class="bottonConfirm" type="primary" @click="selectNetwork()">确 定</el-button>
        <!--dialogFormVisible = false-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        total: 0,
        assetData: [],
        assetRadio: [],
        inOptions: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        currentPage4: 4,
        getConfigBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'asset_config_get'
        },
        getAssetBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'asset_condition_get',
          data: {
            condition: {
              asset_name: '',
              model: ''
            },
            page: {
              page_number: '1',
              page_size: '10'
            }
          }
        }
      }
    },
    methods: {
      openDialog() {
        this.dialogTableVisible = true
        this.getAssetBody.data.condition.asset_name = ''
        this.getAssetBody.data.condition.model = ''
        this.getAsset()
      },
      getAsset() {
        axios.post('/asset', this.getConfigBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.inOptions = res.data.data.model
        })
          .catch(function(error) {
            console.log(error)
          })
        axios.post('/asset', this.getAssetBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res.data.data)
          this.assetData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
          for (let i = 0; i < this.assetData.length; i++) {
            if (this.assetData[i].asset_status === 0) {
              this.assetData[i].asset_status = '未启用'
            } else {
              this.assetData[i].asset_status = '已启用'
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.getAssetBody.data.page.page_number = (val) + ''
        this.getAsset()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.getAssetBody.data.page.page_size = (pageSize) + ''
        this.getAsset()
      },
      assetChangeFun(val) {
        this.assetRadio = val
      },
      selectNetwork() {
        if (this.assetRadio.length === 0) {
          this.$message.error('请勾选一个设备')
        } else if (this.assetRadio.length > 1) {
          this.$message.error('只允许选择一个设备')
        } else {
          this.$emit('assetOnly', this.assetRadio)
          this.dialogTableVisible = false
        }
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .clears{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-left: 10px;
  }
  /deep/ .indieWidth {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
    margin-top: 6px;
  }
  /deep/ .bottonQuery {
    margin-top: 6px;
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .bottonConfirm {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .el-dialog {
    border-radius: 5px;
    width: 1050px;
  }
  /deep/ .el-dialog__header {
    background: #E3E6EE;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px 9px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  /deep/ .el-dialog__headerbtn {
    top: 15px;
  }
  /deep/ .el-dialog__body {
    padding: 20px;
    height: 665px;
  }
  /deep/ .el-dialog__footer {
    height: 50px;
    border-top: 1px solid #DCDFE6;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table th {
    padding: 4px 0px;
  }
  /deep/ .el-table td {
    padding: 13px 0px;
    font-weight: normal;
  }
  /deep/ .block {
    margin-top: 5px;
    height:15px;
  }
  /deep/ .el-pagination {
    float: right;
  }
  /deep/ .relation {
    float: right;
    height: 30px;
    font-size: 14px;
    padding: 6px 16px;
    color: #fff;
    background: #0072F3;
    border-color: #0072F3;
  }
</style>
